الطاولات

صفحة الطاولات حطيتها ثاني شي لان لازم علمود تحط طاول بقاعة لازم عندك ...قاعة , فلهذا علمود تسوي طاول لازم عندك قاعة اول شي

---

فايلات الفولدر

// Tables Folder
TablesRequest.ts;
useTables.ts;
TablesView.tsx;

---

TablesRequest.ts

import * as z from "zod";

export const schema = z.object({
  tableNumber: z
    .number({ required_error: "يجب ادخال رقم" })
    .min(0, { message: "يجب ان يكون رقم الطاولة صفر او اكثر" }),
  capacity: z
    .number({ required_error: "يجب ادخال رقم" })
    .min(1, { message: "يجب ان تكون سعة الطاولة اكبر من صفر" }),
});

export type TablesRequestType = z.infer<typeof schema>;

• السكيما مال الفورمة مال اضافة طاولة جديدة وعدد المقاعد

---

useTables.ts

//------------------Delete Table--------------------//
const useDeleteTable = useMutation({
  mutationFn: deleteTable,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["tables"],
      refetchType: "active",
    });
    queryClient.invalidateQueries({
      queryKey: ["halls"],
      refetchType: "active",
    });
    setSelectedTable(null);
    setOpenDeleteDialog(false);
  },
  onError: (error: any) => {
    setRequestError(error || "حدث خطأ في حدث الطاولة");
    console.error("edit tables error :", error);
  },
});
//--------------------------------------//
const handleOpenDelete = (tableId: number) => {
  if (tablesData) {
    const table = tablesData.find((table) => table.id === tableId);
    if (table) {
      setSelectedTable(table.id);
      setOpenDeleteDialog(true);
    }
  }
};
//--------------------------------------//
const handleTableDelete = () => {
  if (selectedTable && selectedHall) {
    useDeleteTable.mutate({
      tableId: selectedTable,
      hallId: selectedHall,
    });
  }
};

• useDeleteTable : هاي الدالة راح تنفذ عملية الحذف وراح تستخدم ال deleteTable Function
• محتاج علمود تشتغل الدالة شغلتين tableId , hallId والي راح يتم فحصهن بدالة ال handleTableDelete اذا اكو قيمة راح يفعل عملية الحذف واذا لا مراح يتفعل
• handleOpenDelete : هاي راح تشغل ال Dialog مال الحذف علمود تأكد على عملية الحذف بس تجيك اذا اكو هيج طاولة مختارة لو لا قبل لا يفتح ال Dialog

//-------------update Table---------------//
const useEditTable = useMutation({
  mutationFn: editTable,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["tables"],
      refetchType: "active",
    });
    queryClient.invalidateQueries({
      queryKey: ["halls"],
      refetchType: "active",
    });
    setSelectedTable(null);
    setRequestError("");
    setOpenDialog(false);
  },
  onError: (error: any) => {
    setRequestError(error || "حدث خطأ في تعديل الطاولة الطاولة");
    console.error("edit tables error :", error);
  },
});
//----------------------------//
const openEditTableDialog = (id: number) => {
  if (tablesData) {
    const table = tablesData.find((table) => table.id === id);
    if (table) {
      setSelectedTable(table.id);
      reset({
        tableNumber: table.tableNumber,
        capacity: table.capacity,
      });
      setOpenDialog(true);
    }
  }
};

• openEditTableDialog : راح تجيك اذا اكو بيانات اول شي جاية لو لا , بعدين راح يدور على ال Id الي اجاه بهاي الطاولات اذا موجودة راح يسوي تحديث ويصفر رقم الطاولة والعدد علمود التحديث الجاي
• useEditTable : راح تتفعل لمن يسوي المستخدم تحديث وراح يعبر الها من ال onSubmit Function الطاولة المحدثة بياناتها
• راح يسوي عملية Refetch للقاعات والطاولات لان بعد ما يفيد الكاش القديم

//-------------Add Table----------------//
const onSubmit = (data: TablesRequestType) => {
  if (selectedHall) {
    if (selectedTable) {
      useEditTable.mutate({
        ...data,
        restaurantHallId: selectedHall,
        id: selectedTable,
      });
    } else {
      useAddTable.mutate({ ...data, restaurantHallId: selectedHall });
    }
  }
};

//------------------------------//
const useAddTable = useMutation({
  mutationFn: addTable,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["tables"],
      refetchType: "active",
    });
    queryClient.invalidateQueries({
      queryKey: ["halls"],
      refetchType: "active",
    });
    setRequestError("");
    setOpenDialog(false);
  },
  onError: (error: any) => {
    if (axios.isAxiosError(error)) {
      const errorMessage = error.response?.data?.message || "Unknown error";
      console.log("errorMessage", errorMessage);
      toast.error(errorMessage);
    } else {
      console.error("Unexpected error", error);
    }
  },
});

• onSubmit : لمن المستخدم حيدوس تحديث او اضافة الدالة الحالية راح تتفعل بكل الاحوال بس راح تجيك اذا اكو قاعة وطاولة مختارة اذا راح يحدث واذا لا راح يسوي اضافة
• useAddTable : هنا راح يستقبل من الهاندلر البيانات الي دخلها المستخدم على الطاولة الجديدة وراح يسوي عملية انشاء وراح يسوي ايضا Refetch على القاعات والطاولات لان الكاش القديم بعد ما يفيد

---

TablesView.tsx

type TableViewProps = {
  table: TableType;
  t: TFunction;
  openEditTable: (id: number) => void;
  openDeleteDialog?: (id: number) => void;
};
export function MonitorTable({
  table,
  t,
  openEditTable,
  openDeleteDialog,
}: TableViewProps) {
  const [dir] = useLocalStorage("dir", "rtl");
  return (
    <div
      key={table.id}
      className={`rounded-2xl px-2 py-3 bg-[#F6F6F9] dark:bg-[#27252C] flex flex-col flex-wrap items-center gap-6`}
    >
      <div
        className={`relative p-2 bg-gray-100 dark:bg-[#383540] rounded-3xl ${
          table.isBusy ? "text-red-500" : "text-[#55C023]"
        } text-6xl`}
      >
        {tableIconType4}
        <span className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-white text-2xl font-bold">
          {table.tableNumber}
        </span>
      </div>
      <div className="flex gap-2">
        <Button
          className="bg-white text-black border hover:bg-white/60"
          onClick={() => openEditTable(table.id)}
        >
          <TbEdit /> {t("pages.tables.editTable")}
        </Button>
        {openDeleteDialog && (
          <Button
            onClick={() => openDeleteDialog(table.id)}
            variant={"destructive"}
          >
            <Trash />
            {t("pages.tables.deleteTable")}
          </Button>
        )}
      </div>
    </div>
  );
}

-MonitorTable : هذا كومبوننت خاص بالتيبل علمود يعرض الطاول بالشكل الي شفتة ببداية الصفحة

• TableViewProps : هاي انواع البيانات الي راح تعبر للفانكشن والي هنة اربعة مثل ما موضحة ووحدة من عدهن هي tFunction هاي خاصة بالترجمة علمود اللlocalization

ملاحظة : بالنسبة للDialogComponent و DeleteDialog هذني راح يتم الشرح عنهن بفولدر الملفات المشتركة لانهن مستخدمة باكثر من مكان